<%--
  Created by IntelliJ IDEA.
  User: 龚泽文
  Date: 2021/11/2
  Time: 9:35
  To change this template use File | Settings | File Templates.
--%>
<%@include file="../common/IncludeTop.jsp"%>
<style>
    .suspensionWindow{
        width: auto;
        height: auto;
        background-color: aqua;
        position: absolute;
    }
</style>



<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>


<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="viewCategory?categoryId=FISH" ><img src="images/fish_icon.gif" /></a>
            <br/> Saltwater, Freshwater <br/>
            <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
            <br /> Various Breeds <br />
            <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
            <br /> Exotic Varieties
        </div>
    </div>

    <div id="MainImage">
        <div id="MainImageContent">
            <map name="estoremap">
                <area alt="BIRDS" id="birdimage" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" />
                <area alt="FISH" id="fishimage" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" />
                <area alt="DOGS" id="dogimage" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" />
                <area alt="REPTILES" id="reptileimage" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" />
                <area alt="CATS" id="catimage" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect"/>
                <area alt="BIRDS" id="birdsimage" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect"/>
                <div id="inform" style="display: none"></div>
            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
        </div>

    </div>
    <div id="Separator">&nbsp;</div>
</div>

<script type="text/javascript">
    var xmlHttpRequest ;
    var birdimage = document.getElementById("birdimage");
    birdimage.onmouseover=function (){
        showInform(birdimage.alt);
    }
    birdimage.onmouseout=function (){
        hiddenInform(event);
    }
    birdimage.onmousemove=function (){
        informPosition(event);
    }
    var fishimage = document.getElementById("fishimage");
    fishimage.onmouseover=function (){
        showInform(fishimage.alt);
    }
    fishimage.onmouseout=function (){
        hiddenInform(event);
    }
    fishimage.onmousemove=function (){
        informPosition(event);
    }
    var dogimage = document.getElementById("dogimage");
    dogimage.onmouseover=function (){
        showInform(dogimage.alt);
    }
    dogimage.onmouseout=function (){
        hiddenInform(event);
    }
    dogimage.onmousemove=function (){
        informPosition(event);
    }
    var catimage = document.getElementById("catimage");
    catimage.onmouseover=function (){
        showInform(catimage.alt);
    }
    catimage.onmouseout=function (){
        hiddenInform(event);
    }
    catimage.onmousemove=function (){
        informPosition(event);
    }
    var reptileimage = document.getElementById("reptileimage");
    reptileimage.onmouseover=function (){
        showInform(reptileimage.alt);
    }
    reptileimage.onmouseout=function (){
        hiddenInform(event);
    }
    reptileimage.onmousemove=function (){
        informPosition(event);
    }
    var birdsimage = document.getElementById("birdsimage");
    birdsimage.onmouseover=function (){
        showInform(birdsimage.alt);
    }
    birdsimage.onmouseout=function (){
        hiddenInform(event);
    }
    birdsimage.onmousemove=function (){
        informPosition(event);
    }
    function informPosition(event){
        var e = event || window.event;
        var x = event.clientX+10;
        var y = event.clientY+10;

        var inform = document.getElementById('inform');

        inform.style.left=x;
        inform.style.top=y;
    }

    function showInform(categoryId) {
        console.log(categoryId);
        xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = processResponse;
        xmlHttpRequest.open("GET","suspensionWindow?categoryId="+categoryId,true)
        xmlHttpRequest.send(categoryId);
    }
    function processResponse(event) {
        if (xmlHttpRequest.readyState == 4) {
            if (xmlHttpRequest.status == 200) {
                var resp = xmlHttpRequest.responseText;
                //显示悬浮层
                var inform = document.getElementById("inform");
                inform.className = 'suspensionWindow';
                inform.innerText = resp;
                inform.style.display = "block";
            }
        }
    }

    //隐藏悬浮层
    function hiddenInform(event){
        var informDiv = document.getElementById('inform');
        var x=event.clientX;
        var y=event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
            document.getElementById('inform').style.display='none';
        }
    }


</script>
<%@include file="../common/IncludeBottom.jsp"%>
